<template>
  <i class="toobar-icon" title="插入表情" ref="triggerEle" @click="isOpen">
    <SvgIcon icon-class="smile" />
  </i>
  <popover title="全部表情" :trigger-ele="[triggerEle]" v-model="show">
    <el-scrollbar height="300px">
      <ul class="clearfix">
        <li
          class="emotion-container flex"
          v-for="[emotion, { id, url }] in emotionsData"
          :key="id"
        >
          <img
            draggable="false"
            class="emotion disableSelect"
            :title="emotion"
            :src="`https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/${url}`"
            :alt="emotion"
            @click="insertEmotion"
          />
        </li></ul></el-scrollbar
  ></popover>
  <img-upload ref="uploadRef" @insert-img="insertImg">
    <i class="toobar-icon" title="插入图片" @click="handleToUpload">
      <SvgIcon icon-class="image" /> </i
  ></img-upload>
  <i class="toobar-icon" title="截图" @click="showShort = true">
    <SvgIcon icon-class="screenshot" />
  </i>
  <i class="toobar-icon" title="发送语音" @click="showRecord = true">
    <SvgIcon icon-class="record" />
  </i>
  <record v-model="showRecord"></record>
  <screen-short v-if="showShort" @destroy-component="destroyShort"></screen-short>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import emotionsData from "@/staticDatas/emotion";
import popover from "@/components/ui-components/popover.vue";
import imgUpload from "./imgUpload.vue";
import record from "./record.vue";

const props = defineProps<{
  editEle?: HTMLDivElement;
}>();
const emits = defineEmits<{
  (e: "insertEmotion", target: Array<Node>, isInsertFile: boolean): void;
  (e: "resetCursor"): void;
}>();

let triggerEle = ref<HTMLSpanElement>(document.createElement("span"));
// 是否显示表情框
let show = ref<boolean>(false);

/**
 * 插入表情
 */
const insertEmotion: (e: MouseEvent) => void = (e: MouseEvent): void => {
  const imgEle: HTMLImageElement = e.target as HTMLImageElement;
  const cloneEle: HTMLImageElement = imgEle.cloneNode() as HTMLImageElement;
  cloneEle.removeAttribute("title");
  cloneEle.className = "chat-edit__emotion";
  cloneEle.dataset.key = "表情";
  emits("insertEmotion", [cloneEle], false);
};

/**
 * 是否需要打开表情框
 */
const isOpen: () => void = (): void => {
  show.value = !show.value;
  if (show.value) if (document.activeElement !== props.editEle) emits("resetCursor");
};

// 给imgrUpload组件一个ref属性
let uploadRef = ref<InstanceType<typeof imgUpload>>();

// 上传图片
const handleToUpload: () => void = (): void => {
  (uploadRef.value as any).uploadImg();
  emits("resetCursor");
};

// 插入图片
const insertImg: (target: Array<Node>) => void = (target: Array<Node>): void =>
  emits("insertEmotion", target, true);

/**
 * 是否显示录音对话框
 */
const showRecord = ref<boolean>(false);

/**
 * 是否开始截屏
 */
const showShort = ref<boolean>(false);
// 销毁截屏组件的回调
const destroyShort = (show: boolean) => (showShort.value = show);
</script>

<style lang="scss" scoped>
.toobar-icon {
  margin-right: 15px;
  font-size: 24px;
  cursor: pointer;
  color: #828181d8;

  &:hover {
    color: #706e6ed8;
  }
}

.emotion {
  @include setWidHei(24px, 24px);
  cursor: pointer;

  &-container {
    float: left;
    @include setWidHei(40px, 40px);
    margin: 5px 10px;
  }
}
</style>
